<template>
  <div class="whiteTea">
    <div class="left">
      <figure @click="showDetail(1)">
        <img src="../assets/white1.jpg" alt="" />
        <p>一亩茶园 品素资溪有机白茶250g礼盒装 有机茶绿茶茶叶白茶茶叶</p>
      </figure>

      <figure @click="showDetail(1)">
        <img src="../assets/white2.jpg" alt="" />
        <p>
          一亩茶园 心境有机白茶50g罐装 资溪有机白茶茶叶 绿茶茶叶 有机白茶50g
        </p>
      </figure>

      <figure @click="showDetail(1)">
        <img src="../assets/white3.jpg" alt="" />
        <p>一亩茶园 资溪有机白茶100g礼盒 绿茶茶叶</p>
      </figure>

      <figure @click="showDetail(2)">
        <img src="../assets/white4.jpg" alt="" />
        <p>一亩茶园 品素资溪有机白茶250g礼盒装 有机茶绿茶茶叶白茶茶叶</p>
      </figure>

      <figure @click="showDetail(2)">
        <img src="../assets/white5.jpg" alt="" />
        <p>
          一亩茶园 臻品白眉红一级100g 资溪有机红茶茶叶礼盒装金骏眉工艺 2020年
        </p>
      </figure>

      <figure @click="showDetail(2)">
        <img src="../assets/white6.jpg" alt="" />
        <p>一亩茶园 资溪白茶有机白茶160g礼盒装 2020年</p>
      </figure>
    </div>
    <div class="right">
      <!-- autoplay -->
      <a-carousel autoplay class="swipper-box" v-if="showSwipper == 1">
        <div class="picture-box">
          <img src="../assets/product/1.jpg" alt="" />
          <img src="../assets/product/2.jpg" alt="" />
          <img src="../assets/product/3.jpg" alt="" />
        </div>

        <div class="picture-box">
          <img src="../assets/product/4.jpg" alt="" />
          <img src="../assets/product/5.jpg" alt="" />
          <img src="../assets/product/6.jpg" alt="" />
          <img src="../assets/product/7.jpg" alt="" />
        </div>
        <div class="picture-box">
          <img src="../assets/product/8.jpg" alt="" />
          <img src="../assets/product/9.jpg" alt="" />
          <img src="../assets/product/10.jpg" alt="" />
        </div>
        <div class="picture-box">
          <img src="../assets/product/11.jpg" alt="" />
          <img src="../assets/product/1.jpg" alt="" />
          <img src="../assets/product/2.jpg" alt="" />
        </div>
      </a-carousel>

      <a-carousel autoplay class="swipper-box" v-if="showSwipper == 2">
        <div class="picture-box">
          <img src="../assets/product-red/1.jpg" alt="" />
          <img src="../assets/product-red/2.jpg" alt="" />
          <img src="../assets/product-red/3.jpg" alt="" />
        </div>

        <div class="picture-box">
          <img src="../assets/product-red/4.jpg" alt="" />
          <img src="../assets/product-red/5.jpg" alt="" />
          <img src="../assets/product-red/6.jpg" alt="" />
        </div>
        <div class="picture-box">
          <img src="../assets/product-red/7.jpg" alt="" />
          <img src="../assets/product-red/8.jpg" alt="" />
          <img src="../assets/product-red/1.jpg" alt="" />
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      showSwipper: 1,
    };
  },
  //方法集合
  methods: {
    // 详情展示
    showDetail(footer) {
      this.showSwipper = footer;
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>


<style lang="less" scoped>
.whiteTea {
  display: flex;
  box-sizing: border-box;
  .left {
    width: 40%;
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    figure {
      width: 25%;
      border: 1px solid #a37c42;
      height: 260px;
      cursor: pointer;
      margin-right: 20px;
      img {
        width: 170px;
        height: 170px;
        // border: 1px solid red;
      }
    }
  }
  .right {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;

    .swipper-box {
      width: 59vw;
      height: 90%;

      height: 80vh;
      box-sizing: border-box;
      padding-top: 20px;
      .picture-box {
        width: 100%;
        height: 75vh;
        display: flex !important;
        img {
          width: 33% !important;
        }
      }
    }
  }
}
</style>
